
<template>
  <div class="main-header">
    <slot name="left">
      <div class="back-wrap" v-if="showLeft">
        <van-icon
          name="arrow-left"
          @click="goBack"
        />
      </div>
    </slot>
    
    <div class="main-header-title">{{ title }}</div>
    <slot name="right">
      <!-- <div class="more-icon">more</div> -->
    </slot>
    
  </div>
</template>
<script>
/**
 * @desc 头部组件
 *  @example 
 *  <HeaderComponent
      title="文章详情"
    >
      <div class="back-wrap" slot="left">
        <van-icon name="revoke" @click="goBack" />
      </div>
    </HeaderComponent>
 */
export default {
  name:'MainHeader',
  props: {
    showLeft: { // 是否展示返回按钮
      type: Boolean,
      default: false
    }, // Mor
    title: {
      type: String,
      default: '嘉宾资料'
    },
  },
  methods: {
    // 返回上一页
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="less" scoped>
.main-header{
  position: relative;
  display: flex;
  align-items: center;
  height: 120px;
  background: #fff;
  box-shadow: 0 0 8px #eee;
  border-bottom: 1px solid #e8e8e8;
  .main-header-title{
    padding: 0 120px;
    flex: 1;
    text-align: center;
    font-size: 38px;
  }
  .back-wrap{
    position: absolute;
    transform: translateX(12px);
  }
}
</style>